  <!-- 此头部为首页外的其他页面引用，首页头部特殊，代码写在首页html内部-->
<div class="head">
  <div class="head-inner">
    <div class="head-logo lf">
      <a href="#">
        <span><img src="images/index/logo.png" alt=""/></span>
        <div class="l-txt">
          <p class="l-p1">
            北京丹青诺和牧业科技有限公司
          </p>
          <p class="l-p2">
              BEIJING DANQING KNOWHOW FARM TECH CO.LTD
          </p>
        </div>
      </a>
    </div>
    <div class="dao-wx rt">
      <ul class="x-list">
        <li>
          <a href="#">
            语言：中文 <u></u>
          </a>
        </li>
        <li>
          <a href="#">
            English
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="head-nav">
    <div class="main-md">
      <ul>
        <li><a href="#">
          首页
        <b></b>
        </a></li>
        <li class="active"><a href="#"> 产品  <b></b> </a></li>
        <li><a href="#">  案例展示  <b></b> </a></li>
        <li><a href="#"> 团队<b></b> </a></li>
        <li><a href="javascript:;">  关于我们 <b></b> </a>
          <div class="hide_list">
            <a href="#">公司介绍</a>
            <a href="#">解决方案</a>
            <a href="#">服务展示</a>
          </div>
        </li>
        <li><a href="javascript:;">  联系我们  <b></b> </a>
          <div class="hide_list">
            <a href="#">联系我们</a>
            <a href="#">留言信息</a>
          </div>
        </li>
        <li> <i class="iconfont icon-dianhua"></i> 联系电话：01234567  </li>
        <div class="both"></div>
      </ul>
    </div>
  </div>
  <div class="head-phone">
    <div class="head-logo lf">
      <a href="#">
        <span><img src="images/index/logo.png" alt=""/></span>
        <div class="l-txt">
          <p class="l-p1">
            北京丹青诺和牧业科技有限公司
          </p>
          <p class="l-p2">
            BEIJING DANQING KNOWHOW FARM TECH CO.LTD
          </p>
        </div>
      </a>
    </div>
    <div class="top_cen rt">
      <a href="javascript:;">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <a class="cen_x active" href="javascript:;">
        ×
      </a>
    </div>
    <ul class="navlist_mo">
      <li>
        <a href="#">首页</a>
      </li>
      <li class="mo">
        <a href="#">产品案例</a>
      </li>
      <li class="mo">
        <a href="#">展示团队</a>
      </li>
      <li class="mo">
        <a>关于我们</a>
        <ul class="abm_nav">
          <li> <a href="#">公司介绍</a></li>
          <li><a href="#">解决方案</a></li>
          <li><a href="#">服务展示</a></li>
        </ul>
      </li>
      <li class="mo">
        <a>联系我们</a>
        <ul class="abm_nav">
          <li>
            <a href="#">联系我们</a>
          </li>
          <li>
            <a href="#">留言信息</a>
          </li>
        </ul>
      </li>
      <li class="mo">
        <a>语言</a>
        <ul class="abm_nav">
          <li>
            <a href="#">中文</a>
          </li>
          <li>
            <a href="#">English</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
  <script>
    $(function(){
      /*导航下拉宽度控制*/
     /*导航下拉效果*/
      $('.head-list>li').on('mouseenter',function(){
        $(this).children('div').slideDown(200);
      }).on('mouseleave',function(){
        $(this).children('div').slideUp(200);
      });
      //点击切换导航栏按钮  手机端
      $('.head-phone').on('click','.top_cen a',function(){
        if($(this).attr('class')!='active'){
          $(this).addClass('active');
          $(this).siblings().removeClass('active');
        }else{
          $(this).removeClass('active');
          $(this).siblings().addClass('active');
        }
        if($(this).attr('class')!='cen_x active'){
          $('body').css('right','50%');
          $('.nav_bg').fadeIn();
          $('.navlist_mo').css('right','0');
        }else{
          $('body').css('right','0');
          $('.nav_bg').fadeOut();
          $('.navlist_mo').css('right','-50%');
        }
      });
      //侧边栏点击切换效果  手机端
      $('.head-phone').on('click','.mo>a',function(){
        if($(this).parent().attr('class')!='mo active'){
          $(this).parent().addClass('active');
          $(this).parent().siblings().removeClass('active');
        }else{
          $(this).parent().removeClass('active');
        }
      });
      //
      /*切换*/
      $('.x-list li:first-child ').on('click',function(){
        $(this).next().toggle();
      });
      /*该死的需求*/
    })
  </script>

